<!-- 参考页面page/M8/host/clear/M821_6.html -->
<template>
  <div class="venus-list-page">
    <div class="page-search">
      <!--:rules prop 如果不要校验那么这个属性可以不填-->
      <el-form
        label-width="160px"
        style="margin: 20px 50px 20px 0px;"
        size="mini"
      >
        <el-row>
          <!--券商代码-->
          <el-col :span="8">
            <el-form-item label="券商代码:">
              <el-input
                v-model="table.bean_table.broker_code"
                placeholder="请输入券商代码"
              ></el-input>
            </el-form-item>
          </el-col>
          <!--券商名称-->
          <el-col :span="8">
            <el-form-item label="券商名称:">
              <el-input
                v-model="table.bean_table.broker_name"
                placeholder="请输入券商名称"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="text-align: center;">
          <el-button type="success" @click="search">查询</el-button>
          <el-button type="info" plain @click="resetForm">重置</el-button>
          <el-button type="success" @click="addBean">新增</el-button>
        </div>
      </el-form>
    </div>
    <!-- 查询列表返显 -->
    <div class="page-list">
      <table-pagination
        :table-data="table.bean_table.tableData"
        :table-header-config="table.tableHeaderConfig"
        :operation-config="table.operationConfig"
        highlight-current-row
        :total="table.bean_table.total"
        :page-size="table.bean_table.limit"
        :now-page="table.bean_table.nowPage"
        @current-change="currentChange"
        :dict-data="dict"
      />
    </div>

    <!--新增弹出框-->
    <el-dialog :title="dialog.add.title" :visible.sync="dialog.add.formVisible" v-dialogDrag>
      <!-- ref=dlgForm用于验证表单 -->
      <el-form ref="dlgFormAdd" :model="dialog.form" size="mini">
        <el-input type="hidden" v-model="dialog.form.id" />
        <el-row>
          <!--券商代码-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="券商代码"
              :label-width="dialog.formLabelWidth"
              prop="broker_code"
              :rules="dialog.formRules.broker_code"
            >
              <el-input v-model="dialog.form.broker_code" />
            </el-form-item>
          </el-col>
          <!--券商名称-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="券商名称"
              :label-width="dialog.formLabelWidth"
              prop="broker_name"
              :rules="dialog.formRules.broker_name"
            >
              <el-input v-model="dialog.form.broker_name" />
            </el-form-item>
          </el-col>
          <!--联系人-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="联系人"
              :label-width="dialog.formLabelWidth"
            >
              <el-input v-model="dialog.form.contact_name" />
            </el-form-item>
          </el-col>
          <!--联系电话-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="联系电话"
              :label-width="dialog.formLabelWidth"
            >
              <el-input v-model="dialog.form.telephone" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="success" @click="addOk">确 定</el-button>
        <el-button type="info" plain @click="dialog.add.formVisible=false">取 消</el-button>
      </div>
    </el-dialog>
    <!--修改弹出框-->
    <el-dialog :title="dialog.edit.title" :visible.sync="dialog.edit.formVisible" v-dialogDrag>
      <!-- ref=dlgForm用于验证表单 -->
      <el-form ref="dlgFormEdit" :model="dialog.form" size="mini">
        <el-input type="hidden" v-model="dialog.form.id" />
        <el-row>
          <!--券商代码-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="券商代码"
              :label-width="dialog.formLabelWidth"
              prop="broker_code"
              :rules="dialog.formRules.broker_code"
            >
              <el-input v-model="dialog.form.broker_code" />
            </el-form-item>
          </el-col>
          <!--券商名称-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="券商名称"
              :label-width="dialog.formLabelWidth"
              prop="broker_name"
              :rules="dialog.formRules.broker_name"
            >
              <el-input v-model="dialog.form.broker_name" />
            </el-form-item>
          </el-col>
          <!--联系人-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="联系人"
              :label-width="dialog.formLabelWidth"
            >
              <el-input v-model="dialog.form.contact_name" />
            </el-form-item>
          </el-col>
          <!--联系电话-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="联系电话"
              :label-width="dialog.formLabelWidth"
            >
              <el-input v-model="dialog.form.telephone" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="success" @click="editOk">确 定</el-button>
        <el-button type="info" plain @click="dialog.edit.formVisible=false">取 消</el-button>
      </div>
    </el-dialog>
    <!--详情弹出框-->
    <el-dialog :title="dialog.detail.title" :visible.sync="dialog.detail.formVisible" v-dialogDrag>
      <!-- ref=dlgForm用于验证表单 -->
      <el-form ref="dlgFormDetail" :model="dialog.form" size="mini">
        <el-input type="hidden" v-model="dialog.form.id" />
        <el-row>
          <!--券商代码-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="券商代码"
              :label-width="dialog.formLabelWidth"
            >
              <el-input v-model="dialog.form.broker_code" disabled />
            </el-form-item>
          </el-col>
          <!--券商名称-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="券商名称"
              :label-width="dialog.formLabelWidth"
            >
              <el-input v-model="dialog.form.broker_name" disabled />
            </el-form-item>
          </el-col>
          <!--联系人-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="联系人"
              :label-width="dialog.formLabelWidth"
            >
              <el-input v-model="dialog.form.contact_name" disabled />
            </el-form-item>
          </el-col>
          <!--联系电话-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="联系电话"
              :label-width="dialog.formLabelWidth"
            >
              <el-input v-model="dialog.form.telephone" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import request from '../../../../../utils/request'
  import * as kk from '../../../../../utils/k-utils'
  // dialog可以拖拽
  import '../../../../../utils/directives.js'

  export default {
    name: 'M8BrokerInfo',
    data() { // 数据定义
      return {
        /* 字典 */
        dict: {
        },
        /* 表格 */
        table: {
          // 表头配置
          tableHeaderConfig: [
            // { prop: 'order', label: '序号' },
            { prop: 'broker_code', label: '券商代码' },
            { prop: 'broker_name', label: '券商名称' },
            { prop: 'contact_name', label: '联系人' },
            { prop: 'telephone', label: '联系人电话' },
            { prop: 'upd_date', label: '更新日期' }
          ],
          operationConfig: { // 表格操作配置
            fixed: 'right',
            width: 200,
            operationButton: [
              // 每一个操作。value:操作文字；func:回调函数
              { value: '修改', func: this.myModify },
              { value: '删除', func: this.myDelete },
              { value: '详情', func: this.myDetail }
            ]
          },
          bean_table: {
            total: 0, // 总条数
            nowPage: 1, // 当前第几页
            limit: 5, // 分页配置
            tableData: [], // 表格数据
            exeid: 'M821_6EQ001', // exeid
            // 查询条件
            broker_code: '', // 券商代码
            broker_name: '' // 券商名称
          }
        },
        /* ===========新增，修改，详情=============== */
        dialog: {
          formLabelWidth: '100px',
          formRules: {
            broker_code: [
              { required: true, message: '请输入券商代码', trigger: 'blur' }
            ],
            broker_name: [
              { required: true, message: '请输入券商名称', trigger: 'blur' }
            ]
          },
          form: {
            id: '', // 主键
            broker_code: '', // 券商代码
            broker_name: '', // 券商名称
            contact_name: '', // 联系人
            telephone: '' // 联系电话
          },
          add: {
            title: '新增券商信息',
            formVisible: false
          },
          edit: {
            title: '修改券商信息',
            formVisible: false
          },
          detail: {
            title: '查看券商信息',
            formVisible: false
          }
        }
      }
    },
    mounted() {
      // 初始化调用
      this.init()
    },
    methods: {
      // 页面初始化
      init: function() {
        /* 加载表格数据 */
        this.table.bean_table.nowPage = 1 // 初始第一页
        kk.k_load_table(this, 'bean_table', 'clearing')
      },
      // 发送保存
      send_save(service_name, exeid, params) {
        params.exeid = exeid
        return request({
          loading: true,
          url: service_name + '/base/comn-update.json',
          method: 'post',
          params: params
        })
      },
      // 事件触发
      search() { // 查询函数
        this.table.bean_table.nowPage = 1 // 初始第一页
        kk.k_load_table(this, 'bean_table', 'clearing')
      },
      // 重置
      resetForm() {
        this.table.bean_table.broker_code = ''// 券商代码
        this.table.bean_table.broker_name = ''// 券商名称
      },
      // 下一页触发的事件
      currentChange(index) {
        this.table.bean_table.nowPage = index // 初始第一页
        kk.k_load_table(this, 'bean_table', 'clearing')
      },
      // ======================弹出框======================
      // 将obj1对象的数据拷贝到obj2对象
      copyObj(obj1, obj2) {
        for (var key in obj1) {
          // 原型对象不拷贝
          if (key === '__proto__') {
            continue
          }
          // 不存在的属性不拷贝
          if (!obj2.hasOwnProperty(key)) {
            continue
          }
          // 自动将number转换成string
          if (typeof obj1[key] === 'number') {
            obj1[key] = '' + obj1[key]
          }
          obj2[key] = obj1[key]
        }
      },
      // 新增
      addBean() {
        // 清空数据
        this.copyObj({
          id: '', // 主键
          broker_code: '', // 券商代码
          broker_name: '', // 券商名称
          contact_name: '', // 联系人
          telephone: '' // 联系电话
        }, this.dialog.form)
        this.$nextTick(() => {
          // 重复新增，去掉校验提示
          this.$refs.dlgFormAdd.clearValidate() // 必须写在$nextTick里面
        })
        this.dialog.add.formVisible = true
      },
      // 新增确认
      addOk() {
        var _this = this
        this.$refs.dlgFormAdd.validate((valid) => {
          if (valid) {
            _this.addOkHandler()
          } else {
            console.log('表单数据检验没有全部通过！！')
          }
        })
      },
      addOkHandler() {
        // 获取全局对象数据
        var bean = this.dialog.form
        var _this = this
        this.send_save('clearing', 'M821_6EU002', bean).then(rep => {
          _this.search()
          // 关闭弹出框
          _this.dialog.add.formVisible = false
        })
      },
      /* -----------修改---------- */
      // 修改
      myModify(item, index) {
        // 赋值
        this.copyObj(item, this.dialog.form)
        this.dialog.edit.formVisible = true
      },
      // 修改确认
      editOk() {
        var _this = this
        this.$refs.dlgFormEdit.validate((valid) => {
          if (valid) {
            _this.editOkHandler()
          } else {
            console.log('表单数据检验没有全部通过！！')
          }
        })
      },
      editOkHandler() {
        // 获取全局对象数据
        var bean = this.dialog.form
        var _this = this
        this.send_save('clearing', 'M821_6EU003', bean).then(rep => {
          _this.search()
          // 关闭弹出框
          _this.dialog.edit.formVisible = false
        })
      },
      /* -----------详情---------- */
      // 详情
      myDetail(item, index) {
        // 赋值
        this.copyObj(item, this.dialog.form)
        this.dialog.detail.formVisible = true
      },
      /* -----------删除---------- */
      // 删除
      myDelete(item, index) {
        var _this = this
        this.$confirm('确认删除吗?', '提示', {})
          .then(() => {
            _this.send_save('clearing', 'M821_6EU001', item).then(rep => {
              _this.search()
              // 关闭弹出框
              _this.dialog.detail.formVisible = false
            })
          })
          .catch(() => { /* 用户取消注销 */ })
      }
    }
  }
</script>

<style scoped>
  /*让文本可以被选中*/
  .venus-list-page {
    -moz-user-select: text; /*火狐*/
    -webkit-user-select: text; /*webkit浏览器*/
    -ms-user-select: text; /*IE10*/
    -khtml-user-select: text; /*早期浏览器*/
    user-select: text;
  }
</style>
